<template>
    <div id="audit_details">
        <div class="container">
            <div class="wrapper">
                <p class="title">申请状态</p>
                <el-form :inline="true" :model="form" :rules="rules">
                    <el-form-item label="名称:" class="v-form-item" prop="name">
                        <el-input v-model="form.name" placeholder="" class="handle-input mr10"></el-input>
                    </el-form-item>

                    <el-form-item label="申请类型:" class="v-form-item" prop="applyType">
                        <el-select
                            :clearable="true"
                            v-model="form.applyType"
                            @change="handleChange"
                            placeholder="请选择申请类型"
                            class="handle-select mr10"
                        >
                            <el-option key="1" label="常规上线" value="1"></el-option>
                            <el-option key="3" label="紧急上线" value="3"></el-option>
                            <!-- <el-option key="3" label="常规下线" value="3"></el-option> -->
                            <!-- <el-option key="4" label="加急下线" value="4"></el-option> -->
                        </el-select>
                    </el-form-item>

                    <el-form-item label="" class="upload-file">
                        <p>上传文件</p>
                    </el-form-item>
                    <el-form-item class="upload-excel" label="上传Excel歌曲列表:" prop="territory">
                        <el-input
                            class=""
                            style="width: 200px"
                            disabled
                            placeholder="显示上传的文件名"
                            clearable
                            v-model="form.territory.name"
                        ></el-input>
                        <img src="" alt="" />
                        <a href="javascript:void(0)" class="btn">
                            点击上传
                            <input
                                ref="file"
                                type="file"
                                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                id="file"
                                name="file"
                                @change="uploadFile"
                            />
                        </a>
                    </el-form-item>

                    <el-form-item class="upload-excel" label="上传版权证明:" prop="musicRight">
                        <el-input
                            class=""
                            style="width: 200px"
                            placeholder="显示上传的文件名"
                            clearable
                            disabled
                            v-model="form.musicRight.name"
                        ></el-input>
                        <img src="" alt="" />
                        <a href="javascript:void(0)" class="btn">
                            点击上传
                            <input ref="file_" type="file" accept=".zip,.rar" id="file" name="file" @change="uploadFile_" />
                        </a>
                    </el-form-item>
                </el-form>
                <el-button class="closeBtn" type="info" @click="hanndleCancel">取消</el-button>
                <el-button :disabled="checkRequire()" class="submit" @click.native="handleSubmit" type="primary">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import NProgress from 'nprogress';
export default {
    name: 'WarehouseApp',
    data() {
        return {
            query: {},
            form: {
                name: '',
                applyType: '',
                territory: '',
                musicRight: ''
            },
            rules: {
                name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                applyType: [{ required: true, message: '请选择申请类型', trigger: 'change' }],
                territory: [{ required: true, message: '请选择上传的Excel文件', trigger: 'change' }],
                musicRight: [{ required: true, message: '请选择上传的版权证明', trigger: 'change' }]
            }
        };
    },
    activated() {},
    watch: {
        'form.applyType'(a, b) {
            console.log(a, b);
            if (a == 3) {
                this.rules.musicRight[0].required = false;
            } else {
                this.rules.musicRight[0].required = true;
            }
        }
    },

    methods: {
        handleChange() {
            this.form.territory = '';
            this.form.musicRight = '';
            this.$refs.file.value = null;
            this.$refs.file_.value = null;
        },
        hanndleCancel() {
            this.$router.replace({
                path: '/warehouse_/manage'
            });
        },
        handleSubmit() {
            this.$confirm('是否提交?', '提交', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.submit();
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    });
                });
        },
        checkRequire() {
            if (this.form.applyType == 3) {
                return this.$isEmpty({
                    name: this.form.name,
                    applyType: this.form.applyType,
                    territory: this.form.territory + ''
                });
            } else {
                return this.$isEmpty({
                    name: this.form.name,
                    applyType: this.form.applyType,
                    territory: this.form.territory + '',
                    musicRight: this.form.musicRight + ''
                });
            }
        },
        async submit() {
            try {
                NProgress.start();
                let url = '/job/apply/supp';
                let headers = {
                    'Content-Type': 'multipart/form-data'
                };
                if (localStorage.getItem('roles') && JSON.parse(localStorage.getItem('roles')).includes('CPOA')) {
                    headers['cppname'] = encodeURIComponent(localStorage.getItem('ms_username'));
                }
                var formdata = new FormData();
                var obj = this.$removeField({
                    name: this.form.name,
                    applyType: this.form.applyType,
                    territory: this.form.territory,
                    musicRight: this.form.musicRight
                });
                for (let key in obj) {
                    formdata.append(key, obj[key]);
                }
                let { data: res } = await this.$http[1].post(url, formdata, {
                    // headers: {
                    //     'Content-Type': 'multipart/form-data',
                    //     cppname:
                    //         localStorage.getItem('roles') && JSON.parse(localStorage.getItem('roles')).includes('CPOA')
                    //             ? localStorage.getItem('ms_username')
                    //             : null
                    // }
                    headers
                });
                console.log(res);
                this.$refs.file.value = null;
                this.$refs.file_.value = null;
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.form = {
                    name: '',
                    applyType: '',
                    territory: '',
                    musicRight: ''
                };
                NProgress.done();
                // this.$router.replace({
                //     path: '/warehouse_/manage'
                // });
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
                NProgress.done();
            }
        },
        uploadFile(e) {
            var event = e || window.event;
            var target = event.target || e.srcElement;
            console.dir(target);
            this.form.territory = target.files[0];

            // target.value = null;
        },
        uploadFile_(e) {
            var event = e || window.event;
            var target = event.target || e.srcElement;
            console.dir(target);
            this.form.musicRight = target.files[0];
            // target.value = null;
        }
    }
};
</script>

<style lang="scss">
#audit_details {
    .container {
        .handle-box {
            margin-bottom: 20px;
        }

        .handle-select {
            width: 120px;
        }

        .handle-input {
            // width: 300px;
            width: 100%;
            display: inline-block;
        }
        overflow: hidden;
        .wrapper {
            width: 500px;
            box-shadow: 1px 1px 10px 2px #ccc;
            min-height: 500px;
            margin-bottom: 20px;
            position: relative;
            // float: left;
            .closeBtn {
                margin-left: 15px;
                width: 80px;
                position: absolute;
                left: 10px;
                bottom: 15px;
            }
            .submit {
                margin-left: 15px;
                width: 80px;
                position: absolute;
                left: 100px;
                bottom: 15px;
            }
            .title {
                height: 40px;
                line-height: 40px;
                margin-bottom: 40px;
                border-bottom: 1px solid #ccc;
                color: #666;
                padding-left: 5%;
                box-sizing: border-box;
                font-size: 14px;
                font-weight: bold;
            }

            .v-form-item {
                margin-right: 0;
                margin-left: 15px;
                width: calc(100% - 50px);

                .el-form-item__label {
                    width: 100px;
                    text-align: right;
                    padding-right: 10px;
                    box-sizing: border-box;
                }
                .el-form-item__content {
                    width: calc(100% - 100px);
                    .el-select {
                        width: 100%;
                    }
                }
            }
            .upload-file {
                // margin-top: 50px;
                .el-form-item__content {
                    margin-left: 35px !important;
                    p {
                        width: 150px;
                        height: 30px;
                        line-height: 30px;
                        background-color: rgba(0, 0, 0, 0.1);
                        text-align: center;
                        color: #333;
                    }
                }
            }

            .upload-excel {
                padding-left: 10px;
                box-sizing: border-box;

                .el-form-item__label {
                    width: 150px;
                    text-align: right;
                    font-size: 14px;
                    color: #333;
                }
            }
            .btn {
                position: relative;
                display: inline-block;
                text-align: center;
                color: #fff;
                text-decoration: none;
                width: 80px;
                height: 32px;
                line-height: 32px;
                background: #409eff;
                border-radius: 3px;
                font-size: 12px;
                vertical-align: middle;
                margin-left: 25px;
            }
            input[name='file'] {
                opacity: 0;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
            }
        }

        .red {
            color: #ff0000;
        }
        .mr10 {
            margin-right: 10px;
        }
        .table-td-thumb {
            display: block;
            margin: auto;
            width: 40px;
            height: 40px;
        }
    }
}
</style>
